<template>
    <el-row>
        <el-card class="main-content ">
            <h2 class="text-center" style="text-align: center ;color: #409eff">
                <strong>{{article.title}}</strong>
            </h2>
            <div>
                <span style="font-style: initial">问题标签:</span>
                <el-tag v-for="tag in article.tagList" :key="tag.id">{{tag.tagname}}</el-tag>
            </div>
            <!--    问题简介    -->
            <el-card>
                <div slot="header" class="clearfix">
                    <h3><i class="el-icon-question">问题简介:</i></h3>
                </div>
                <div v-highlight>
                    {{article.description}}
                </div>
            </el-card>


            <!--  问题具体描述-->
            <div>
                <h3><i class="el-icon-info">详细描述:</i></h3>
                <article v-html="article.contentFormat"></article>
            </div>
            <!--     功能按钮-->
            <el-row>
                <el-col :span="10" class="btn-grop">
                    <el-button type="primary" @click="fork">关注问题</el-button>
                    <el-button>写回答</el-button>
                </el-col>
                <el-col :span="10">
                    <ul class="foot-icon">
                        <i class="el-icon-info">评论</i>
                        <i class="el-icon-share">分享</i>
                        <i class="el-icon-star-on">喜欢</i>
                        <i class="el-icon-upload">举报</i>
                    </ul>
                </el-col>

            </el-row>

        </el-card>
    </el-row>
</template>

<script>
    import Article from "../../pages/article";
    import {
        forkQuestion
    } from "../../api";
    import storage from "../../model/storage";

    export default {
        name: "ArticleDetailHeader",
        components: {
            Article
        },
        //通过插槽传入父页面的值
        props: {
            article: {}
        },
        data() {
            //当前用户的信息
            return {
                user: {
                    uid: '',
                    uname: ''
                }
            };
        },
        methods: {
            //关注问题
            fork() {
                if (this.user.uid == null) {
                    this.$message.error("清先登录")
                } else {

                    forkQuestion(this.user.uid, this.article.id)
                        .then(result => {
                            console.log(result);
                            if (result.data.code == 501) {
                                this.$message.error("你已经关注过这条问题，不要重复关注");
                            }
                            if (result.data.code == 200) {
                                this.$message.success("问题关注成功");
                            }
                        })
                }
            },
        },
        created() {
            //从哪store中取出用户的信息
            this.user.uname = storage.get("username");
            this.user.uid = storage.get("uid")

        }
    }
</script>

<style scoped>
    .btn-grop {
        margin-top: 10px;
    }

    .foot-icon i {
        margin-left: 5px;
        margin-right: 10px;
        text-decoration-color: #f56c6c;
        color: darkgrey;
    }
</style>
